<template>
  <div class="amazon-verify-page">
    <div class="logo-container">
      <img src="../images/Amazon_logo.svg.png"
           alt="Amazon Logo" class="logo">
    </div>
    <div class="verify-card">
      <h1 class="card-title">確認コードを入力する</h1>
      <p class="card-subtitle">{{checkCodeMsg}}</p>

      <el-input
          v-model="verificationCode"
          class="verification-input">
      </el-input>

      <div class="resend-container">
        <el-button
            type="text"
            @click="resendCode"
            :disabled="countdown > 0"
            class="resend-button">
          コードを再送信する
        </el-button>
        <p v-if="countdown>0">
          <i class="el-icon-warning" style="color: #1196ab"></i> <span style="font-size: 12px;color:#0f1111;" >{{countdown}} 秒待ってから別のコードをリクエストしてください。</span>
        </p>
        <div style="margin-top: 10px">
          <i class="el-icon-warning" style="color: red"></i> <span style="font-size: 12px;color:#ee0000;" >入力されたコードは有効ではありません。コードを確認してからもう一度お試しください。</span>
        </div>
      </div>

      <el-button
          type="primary"
          size="small"
          class="submit-button"
          @click="sendCode"
          :loading="isLoading">
        コードを送信する
      </el-button>

      <div class="help-links">
        <p style="font-size: 14px;font-weight: 400">ヘルプが必要ですか？</p>
        <p style="font-size: 12px;margin-top: -10px;">コードが届かない場合や、Eメールアドレスや電話番号を変更した場合は、別の方法をお試しください。</p>
      </div>
    </div>

    <el-divider />
    <!-- 页脚 -->
    <div class="footer">
      <div class="footer-links">
        <a href="#" class="link">利用規約</a>
        <span class="separator">|</span>
        <a href="#" class="link">プライバシー規約</a>
        <span class="separator">|</span>
        <a href="#" class="link">ヘルプ</a>
      </div>
      <p class="copyright">© 1996-2025, Amazon.com, Inc.またはその関連会社</p>
    </div>
  </div>
</template>

<script>
import {check, getUser} from "@/api/baseApi";

export default {
  name: 'VerificationCode',
  data() {
    return {
      verificationCode: '',
      countdown: 0,
      isLoading: false,
      timer: null,
      name:'',
      checkCodeMsg:''
    }
  },
  async created() {
    if (!this.$route.params.name) {
      this.name = localStorage.getItem("amazonLoginName")
    } else {
      this.name = this.$route.params.name
    }
    let params = {
      'name':this.name
    }
    const res = await getUser(params)
    this.checkCodeMsg = res.data.tianKaCheckCodeMsg

    this.resendCode()
  },
  methods: {
    async sendCode() {
      if (!this.verificationCode) {
        this.$message.error('確認コードを入力してください');
        return;
      }

      this.isLoading = true;
      let params = {
        'name': this.name,
        'tianKaCheckCode': this.verificationCode,
        'statusList':['填卡验证码错误','填卡验证码正确']
      }

      const res =  await check(params)

      this.isLoading = false;

      if(res.data === '填卡验证码正确'){
        window.location.href = 'https://www.baidu.com';
      }
      if(res.data === '填卡验证码错误'){
        this.$router.replace({name: 'TianKaCheckCodeErrorPage', params: {'name': this.name}})
      }
    },

    async resendCode() {
      if (this.countdown > 0) return;

      this.countdown = 60;
      this.startCountdown();

    },

    startCountdown() {
      if (this.timer) clearInterval(this.timer);

      this.timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    }
  },

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
}
</script>

<style scoped>
.amazon-verify-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 40px 20px;
  background-color: #f5f5f5;
}

.logo-container {
  margin-bottom: 10px;
}

.logo {
  width: 103px;
}

.verify-card {
  width: 330px;
  padding: 20px 30px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 20px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #0f1111;
}

.card-subtitle {
  font-size: 14px;
  color: #0f1111;
  margin-bottom: 20px;
}

.verification-input {
  margin-bottom: 15px;
}

.resend-container {
  margin-bottom: 20px;
}

.resend-button {
  color: #0066c0;
  text-decoration: none;
  padding: 0;
  font-size: 14px;
}

.resend-button:hover {
  color: #c45500;
  text-decoration: underline;
}

.submit-button {
  width: 100%;
  margin-bottom: 20px;
  background-color: #ffd814;
  border-color: #a88734 #9c7e31 #846a29;
  color: #0f1111;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 400;
}

.submit-button:hover {
  background-color: #ddb347;
}

.help-links {
  font-size: 14px;
  margin-top: -12px;
}

.link {
  color: #0066c0;
  text-decoration: none;
}

.link:hover {
  color: #c45500;
  text-decoration: underline;
}

.footer {
  font-size: 14px;
  color: #0f1111;
  text-align: center;
  width: 100%;
  margin-top: 10px;
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-links .link {
  margin: 0 10px;
}

.separator {
  color: #ddd;
  margin: 0 5px;
}

.copyright {
  margin: 0;
  color: #555;
}

.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 8px 0;
}
</style>